<template>
  <div class="course-container">
    <div class="book-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>课程清单</span>
          </div>
        </template>
        <el-row :gutter="20" v-if="isLoading">
          <el-col
            :xs="24"
            :sm="8"
            :md="8"
            :lg="6"
            :xl="6"
            v-for="item in 12"
            :key="item"
          >
            <el-skeleton style="width: 220px" animated>
              <template #template>
                <el-skeleton-item
                  variant="image"
                  style="width: 220px; height: 220px"
                />
                <div style="padding: 14px">
                  <el-skeleton-item variant="p" style="width: 50%" />
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-items: space-between;
                    "
                  >
                    <el-skeleton-item
                      variant="text"
                      style="margin-right: 16px"
                    />
                    <el-skeleton-item variant="text" style="width: 30%" />
                  </div>
                </div>
              </template> </el-skeleton
          ></el-col>
        </el-row>
        <el-row :gutter="20" v-else>
          <el-col
            :xs="24"
            :sm="8"
            :md="8"
            :lg="6"
            :xl="6"
            v-for="(item, index) in courses"
            :key="index"
          >
            <browse-item :book="item"
          /></el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, onMounted } from "vue";
import browseItem from "@/components/browse-item.vue";
import { getCourseService } from "@/service/browse";
export default {
  components: {
    browseItem,
  },
  setup() {
    let isLoading = ref(true);
    const CoursesData = reactive({
      courses: [],
    });
    onMounted(async () => {
      isLoading.value = true;
      const res = await getCourseService();
      CoursesData.courses = res.data.CourseData;
      isLoading.value = false;
    });
    return {
      ...toRefs(CoursesData),
      isLoading,
    };
  },
};
</script>

<style lang="less" scoped>
.card-header {
  font-weight: 700;
}
</style>
